<template>
	<view class="fwz_page">
		<view class="top">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<text class="title">{{ fname }}</text>
		</view>
		<view class="nav">
			<view class="nav-bar">
				<view class="nav_item" v-for="(item,index) in peixun" :key="index" @click="bindNav(index,item)">
					<view  class="left-title" :class="currentTab == index? 'active' : ''">
					  {{item.name}}
					</view>
				</view>
				<view class="left-title" >
					<view class="jia" :class="jiaIndex==0?'active':''" @click="bindJia(jiaIndex)">价格</view>
					<image  style="margin-left: 10upx;" src="https://jinhoudefault.oss-cn-shenzhen.aliyuncs.com/xiaochengxu/images/up.png" v-if="sprices" @click="bindPsx(sprice)" class="chart"></image>
					<image style="margin-left: 10upx;" src="https://jinhoudefault.oss-cn-shenzhen.aliyuncs.com/xiaochengxu/images/down.png" class="chart" v-if="xprice" @click="bindPxx(xprice)"></image>
					<image style="margin-left: 10upx;" src="https://jinhoudefault.oss-cn-shenzhen.aliyuncs.com/xiaochengxu/images/horn.png" class="chart" v-if="sprice" @click="bindSH(jiaIndex)"></image>
				</view>
				<view class="qiehua">
					
					<image class="sort" src="https://jinhoudefault.oss-cn-shenzhen.aliyuncs.com/xiaochengxu/images/ic_liebiao.png" v-if="is_switch" @click="Changswitch"></image>
					<image class="sort" src="https://jinhoudefault.oss-cn-shenzhen.aliyuncs.com/xiaochengxu/images/ic_wangge.png" v-else @click="Changswitch"></image>
				</view>
			</view>
			<view class="productList">
				<!-- 列表 -->
				<view :class="is_switch == true ? 'abeam' : 'layouts'">
					<view v-for="(item, index) in productList" :key="index" :class="is_switch == true ? 'list' : 'layoutList'" @click="bindGoodsShop(item.id)">
						<view :class="is_switch == true ? 'left-box' : 'leftBox'"><image :class="is_switch == true ? 'goodsImg' : 'goods-img'" :src="item.image"></image></view>
						<view :class="is_switch == true ? 'right-box' : 'rightBox'">
							<view :class="is_switch == true ? 'right-title' : 'goods-title'">{{ item.title }}</view>
							<view class="jiage" :class="is_switch == true ? 'prices' : 'goods-price'">
								<view class="bazzPrice" :class="is_switch == true ? '' : 'goods-bazz'">
									<view :class="is_switch == true ? 'minPrice' : 'goods-min'">￥{{ item.price }}</view>
									<view :class="is_switch == true ? 'maxPrice' : 'goods-max'">￥{{ item.original_price }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			    <view class="" v-if="productList.length==0" style="font-size: 24upx;color: #CCCCCC;display: flex;justify-content: center;align-items: center;">没有更多数据了</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			fname: '',
			token: '',
			shop_id: '',
			is_switch: true,
			currentTab: 0,
			jiaIndex:-1,
			page:1,
			loadingType: "more",
			productList: [],
			peixun:[
				{name:'综合',key:''},
				{name:'销量',key:'sales'},
				{name:'最新',key:'new'},
			],
			sprice:true,
			sprices:false,
			xprice:false,
			ids:null,
			limit:10
		};
	},
	// onReachBottom() {
	// 	this.getData()
	// },
	onLoad(option) {
		this.fname = option.name;
		this.token = option.token;
		this.ids=option.ids
		if(this.currentTab==0){
			this.getData()
		}
	},
	methods: {
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		bindNav(index){
			this.currentTab=index
			this.jiaIndex=-1
			this.sprice=true
			this.sprices=false
			this.xprice=false
			this.getData(index)
		},
		bindJia(){
			this.jiaIndex=0
			this.currentTab=-1
			this.sprice=true
			this.sprices=false
			this.xprice=false
			this.getData()
			
		},
		bindSH(){
			this.jiaIndex=0
			this.currentTab=-1
			this.sprices=true
			this.sprice=false
			this.xprice=false
			this.getData()
		},
		bindPsx(){
			this.jiaIndex=0
			this.currentTab=-1
			this.sprice=false
			this.sprices=false
			this.xprice=true
			this.getData()
		},
		bindPxx(){
			this.jiaIndex=0
			this.currentTab=-1
			this.sprice=false
			this.sprices=true
			this.xprice=false
			this.getData()
		},
		Changswitch: function () {
		    var that = this;
		    that.is_switch=!that.is_switch
		  },
		getData(index){
			uni.showLoading({
				title:'加载中'
			})
			let that=this
			var url = '/api/goods/goods/service_goods';
			let params={
				page:1,
				shop_id:this.ids,
				token:this.token
			}
			if(index==0){
				params = {
					page:1,
					shop_id:this.ids,
				    token:this.token
				};
			}
			if(index==1){
				params = {
					page:1,
					shop_id:this.ids,
					type:'sales'
				};
			}
			if(index==2){
				params = {
					page:1,
					shop_id:this.ids,
					type:'new'
				};
			}
			if(this.sprice==true){
				params = {
					page:1,
					shop_id:this.ids,
					type:'sprice'
				};
			}
			if(this.sprices==true){
				params = {
					page:1,
					shop_id:this.ids,
					type:'sprice'
				};
			}
			if(this.xprice==true){
				params = {
					page:1,
					shop_id:this.ids,
					type:'xprice',
				};
			}
			
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				
				if (res.data.code == 1) {
					uni.hideLoading()
					// var array = res.data.data.data
					// var listValue = []
					// listValue = array.map((item)=>{
					// 	return item
					// })
					// that.loadingType = 'more';
					// if (res.data.data.data== null||res.data.data.data.total==0) {
					// 	that.loadingType = 'noMore';
					// 	return;
					// }
					// if (res.data.data.data.total < that.limit) {
					// 	that.loadingType = "noMore";
					// 	return;
					// }
					// listValue.map(function(item){
					// 	that.productList.push(item)
					// })
					this.productList = res.data.data;
					// that.page = that.page+ 1;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		}, 
		bindGoodsShop(id){
		 	uni.navigateTo({
		 		url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.ids+'&token='+this.token
		 	})
		 },
	}
};
</script>

<style lang="scss" scoped>
.fwz_page {
	.top {
		width: 750upx;
		height: 180upx;
		background: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/new_bjs.png) no-repeat;
		background-size: 750upx 180upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.title {
			font-size: 30upx;
			color: #ffffff;
			margin-left: 30upx;
		}

		image {
			width: 24upx;
			height: 40upx;
			margin-left: 20upx;
		}
	}
	.nav {
		width: 750upx;
		margin-top: 200upx;
		.nav-bar {
			width: 100%;
			height: 66rpx;
			padding: 0 60rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left-title {
				font-size: 28rpx;
				color: #333333;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.jia {
					font-size: 28rpx;
					color: #333333;
				}

				.active {
					border-bottom: 5rpx solid #E32015;
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}
                .chart {
                	width: 16rpx;
                	height: 21rpx;
                }
				
			}
           
			.active {
				border-bottom: 5rpx solid #E32015;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}

			.qiehua {
				padding-top: 12rpx;

				.sort {
					width: 34rpx;
					height: 34rpx;
				}
			}
		}
		.productList {
			width: 750rpx;
			margin-top: 12rpx;
			// 列表样式
			.abeam {
				width: 100%;
				.list {
					padding: 40rpx 20rpx 0 20rpx;
					display: flex;
					justify-content: space-between;
                    background-color: #fff;
					.left-box {
						width: 220rpx;
						height: 220rpx;
						border-radius: 10rpx;

						.goodsImg {
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
						}
					}

					.right-box {
						height: 300rpx;
						position: relative;
						border-bottom: 1rpx solid #efefef;

						.right-title {
							width: 459rpx;
							font-size: 28rpx;
							font-weight: bold;
							color: #333333;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.right-tab {
							margin-top: 27rpx;

							text {
								background: #f3f3f3;
								font-size: 20rpx;
								border-radius: 18rpx;
								margin-right: 20rpx;
								padding: 8rpx 10rpx;
								color: #333;
							}
						}

						.prices {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.bazzPrice {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.minPrice {
									font-size: 28rpx;
									color: #ff2b26;
									font-weight: bold;
								}

								.maxPrice {
									font-size: 24rpx;
									font-weight: 300;
									color: #999999;
									margin-left: 20rpx;
									text-decoration: line-through;
								}
							}

							.haoping {
								font-size: 24rpx;
								font-weight: 300;
								color: #999999;
							}
						}

						.jiage {
							position: absolute;
							top: 158rpx;
						}

						.tubiao {
							position: absolute;
							top: 210rpx;

							.trademark {
								width: 100rpx;
								height: 30rpx;
							}
						}
					}
				}

				.recommend {
					width: 100%;
					background-color: #fff;

					.recTitle {
						display: flex;
						justify-content: center;
						font-size: 24rpx;
						font-weight: bold;
						color: #000000;
					}

					.recImg {
						width: 100%;
						background-color: #fff;
						padding: 0 20rpx;
						display: flex;
						justify-content: space-between;

						.rec {
							width: 150rpx;
							height: 150rpx;
						}
					}
				}
			}

			// 流式样式
			.layouts {
				padding: 10upx 15rpx 0;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.layoutList {
					width: 350rpx;
					margin-bottom: 20rpx;
                    background-color: #fff;
					border-radius: 10upx;
					.leftBox {
						width: 350rpx;
						height: 340rpx;

						.goods-img {
							width: 350rpx;
							height: 360rpx;
							border-radius: 10rpx 10rpx 0rpx 0rpx;
						}
					}

					.rightBox {
						width: 350rpx;
						background: #ffffff;
						border-radius: 0rpx 0rpx 10rpx 10rpx;
						position: relative;

						.goods-title {
							width: 320rpx;
							padding: 0 20rpx;
							font-size: 28rpx;
							color: #333333;
							font-weight: 500;
							line-height: 36rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.goods-tab {
							padding-top: 20rpx;
							padding-left: 30rpx;

							text {
								background: #f3f3f3;
								font-size: 20rpx;
								border-radius: 18rpx;
								margin-right: 20rpx;
								padding: 8rpx 10rpx;
								color: #333;
							}
						}

						.goods-price {
							margin-top: 30rpx;
							margin-left: 20rpx;

							.goods-bazz {
								display: flex;
								justify-content: flex-start;
                                align-items: center;
								.goods-min {
									font-size: 28rpx;
									color: #ff2b26;
								}

								.goods-max {
									font-size: 24rpx;
									color: #999999;
									font-weight: 300;
									text-decoration: line-through;
									margin-left: 20rpx;
								}
							}
						}

						.goods-tubiao {
							margin: 10rpx 0 30rpx 20rpx;

							.goods-trademark {
								width: 100rpx;
								height: 30rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
